<script lang="ts" setup>
import type { MerInfo } from '@/types'
import type { FormInst } from 'nutui-uniapp'
import { useSteps } from '@/composables/useSteps'
import { useApplyStore } from '@/store'

interface Option {
  text: string
  value: string
}

const { merInfo, certInfo, currentStep } = storeToRefs(useApplyStore())
const { next } = useSteps('small')
const ruleForm = ref<FormInst | null>(null)
const form = ref<MerInfo>({
  merName: '',
  merShortName: '',
  businessStatus: '0',
  longitude: 0,
  latitude: 0,
  businessAddr: '',
})
form.value = merInfo.value
// 自动回显
if (certInfo.value.certName && form.value.merName === '') {
  form.value.merName = certInfo.value.certName
  form.value.merShortName = certInfo.value.certName
}

const rules = {
  merName: [
    { required: true, message: '请输入商户名称' },
  ],
  merShortName: [
    { required: true, message: '请输入商户简称' },
  ],
  businessStatus: [
    { required: true, message: '请选择是否有固定营业场所' },
  ],
  businessAddr: [
    { required: true, message: '请输入经营地址' },
  ],
}

function clickPrev() {
  uni.navigateBack({
    delta: 1,
  })
}

function clickNext() {
  // 表单校验
  ruleForm.value?.validate().then(({ valid }) => {
    if (valid) {
      // 先存数据
      merInfo.value = form.value
      next()
    }
  })
}

// 处理输入事件
function handleInput(inputName, event) {
  const value = event
  // 使用正则表达式移除特殊字符和表情
  const filteredValue = value.replace(/<[^>]+(>|$)|[^\w\u4E00-\u9FA5]/g, '')
  form.value[inputName] = filteredValue
}
</script>

<template>
  <div class="input">
    <steps-bar />
    <nut-form ref="ruleForm" :model-value="form" :rules="rules">
      <nut-form-item label="商户名称" prop="merName" required>
        <nut-textarea v-model="form.merName" class="nut-input-text" placeholder="请输入商户名称" type="text" disabled autosize
          placeholder-style="color:#ccc;" max-length="50" />
      </nut-form-item>
      <nut-form-item label="商户简称" prop="merShortName" required>
        <nut-textarea v-model="form.merShortName" class="nut-input-text" placeholder="请输入商户简称" type="text" autosize
          @input="handleInput('merShortName', $event)" placeholder-style="color:#ccc;" max-length="20" />
      </nut-form-item>
      <nut-form-item label="固定经营场所" prop="businessStatus" required label-width="110px">
        <nut-radio-group v-model="form.businessStatus" direction="horizontal" custom-class="li-radio">
          <nut-radio label="0">有</nut-radio>
          <nut-radio label="1">无</nut-radio>
        </nut-radio-group>
      </nut-form-item>
      <nut-form-item prop="businessAddr" required custom-class="li-cell-box li-location-lable">
        <template #label>
          <div class="label" style="display: inline-block">
            <span style="vertical-align: middle;">经营地址</span>
            <div class="icon" style="display: inline-block;font-size: 22px;vertical-align: middle">
              <nut-icon name="location2" size="16px" />
            </div>
          </div>
        </template>
        <location-input v-model="form.businessAddr" v-model:latitude="form.latitude" v-model:longitude="form.longitude"
          placeholder="请选择经营地址" placeholder-style="color:#ccc;" />
      </nut-form-item>
    </nut-form>
    <div class="button">
      <!-- <nut-button v-if="currentStep > 0" type="primary" custom-class="login-plain shake_o" block
        @click="clickPrev">上一步</nut-button> -->
      <!-- login-btns -->
      <nut-button type="primary" custom-class="login-btn  shake_o" block @click="clickNext">下一步</nut-button>

      <!-- <nut-button v-if="currentStep > 0" type="primary" block @click="clickPrev">上一步</nut-button>
      <nut-button type="primary" block @click="clickNext">下一步</nut-button> -->
    </div>
  </div>
</template>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "商户进件",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<style lang="sass" scoped>
.input
  .loader
    width: 210px
    display: flex
    justify-content: space-between
  .table
    width: 100%
    background-color: #fff
    .title
      padding: 10px
  .button
    margin: 40px 20px
    display: flex

:deep(.nut-form-item__label)
  display: flex!important
  flex-direction: row!important
  min-width: 110px!important
:deep(.login-btn)
  width: 100%
  height: 85rpx
  margin-top: 30rpx
  background-color: #2196F3!important
  flex: 1

:deep(.login-plain)
  background-color: #fff!important
  border: 20px solid #2196F3!important!important
  color: #2196F3!important
  width: 100%
  height: 85rpx
  margin-top: 30rpx
  background-color: #2196F3!important
  flex: 1

:deep(.login-btns)
  margin-left: 20rpx

:deep(.nut-textarea__textarea)
  text-align: right!important

:deep(.li-radio)
  width: 100%
  text-align: right

:deep(.nut-step-main)
  margin-top: 20rpx
</style>
